<template>
  <div>
      <div class="box">
        <button @click="show = !show">+</button>
        <transition
          v-on:before-enter="beforeEnter"
          v-on:enter="enter"
          v-on:after-enter="afterEnter"
        >
          <div class="ball" v-show="show"></div>
        </transition>
        <img class="cart" src="https://img1.baidu.com/it/u=3761831681,4005524739&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500" alt="">
      </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      show: false
    }
  },
  methods: {

    // 准备进入前的回调
    beforeEnter: function (el) {
      console.log('beforeEnter')
      // 让小球回到起始位置 
      el.style.transform = 'translate(0, 0)'
    },
    // 开始进入的回调
    enter: function (el, done) {
      console.log('enter')
      // 触发一下el的重排 => 让下面的过渡起效果
      el.offsetTop

      // 指定过渡样式
      el.style.transition = 'transform 1s'
      el.style.transform = 'translate(470px, 430px)'
      done() // 标识过渡样式已准备好, 可以动起来了, 最终才会触发afterEnter
    },
    // 进入结束后的回调
    afterEnter: function (el) {
      console.log('afterEnter')
      this.show = false
    },

  }
}
</script>

<style scoped>
  .box {
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
    position: relative;
  }
  .cart {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
  }
  .ball {
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
  }
</style>